<!-- 首页 -->
<template>
  <div id="home">
    <!-- <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      width="100%"
      height="450px"
    >
      <van-swipe-item v-for="item in carousel" :key="item.id">
        <van-image height="100%" :src="item.url" :fit="imgfit" />
      </van-swipe-item>
    </van-swipe>-->
    <form action="Search">
      <van-search
        v-model="value"
        show-action
        placeholder="产品型号/产品名称"
        @search="onSearch"
        background="#1989fa"
      >
        <div slot="action" @click="onSearch" class="searchbtn">搜索</div>
      </van-search>
    </form>

    <van-tabs v-model="active" color="#1989fa">
      <van-tab :title="list[0]">
        <van-grid :column-num="2" icon-size="3.1rem">
          <van-grid-item
            v-for="item of brand"
            :key="item.id"
            :icon="item.logo"
            @click="onSearch1(item.name)"
          />
        </van-grid>
      </van-tab>
      <van-tab :title="list[1]">
        <van-grid :column-num="2" icon-size="3.0rem">
          <van-grid-item
            v-for="item of special_offer"
            :key="item.id"
            :icon="item.image"
            :text="item.name"
            :info="`￥${item.price}`"
            @click="Details(item.id,item.goods_id)"
          />
        </van-grid>
      </van-tab>
      <van-tab :title="list[2]">
        <van-grid :column-num="2" icon-size="2.9rem">
          <van-grid-item
            v-for="item of product_recommend"
            :key="item.id"
            :icon="item.image"
            :text="item.name"
            :info="`￥${item.price}`"
            @click="Details(item.id,item.goods_id)"
          />
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import HomeInfo from "./component/HomeInfo";

export default {
  name: "home",
  data() {
    return {
      imgfit: "cover",

      value: "",
      active: 1,
      list: ["热门品牌", "爆款特惠", "热卖推荐"],
      brand: {},
      special_offer: {},
      product_recommend: {}
    };
  },

  methods: {
    getHomeInfo() {
      this.$http({
        method: "post",
        url: "home/index/index"
      }).then(res => {
        console.log(res.data.data);
        this.brand = res.data.data.brand;
        this.special_offer = res.data.data.special_offer;
        this.product_recommend = res.data.data.product_recommend;
        console.log(this.special_offer);
      });
    },
    onSearch() {
      console.log(this.value);
      this.$router.push({
        name: "search",
        query: {
          value: this.value
        }
      });
    },
    onSearch1(value) {
      console.log(value);

      this.$router.push({
        name: "search",
        query: {
          value
        }
      });
    },
    //跳转详情
    Details(id, pid) {
      console.log(id, pid);
      this.$router.push({
        name: "detail",
        query: {
          id: id,
          pid: pid
        }
      });
    }
  },

  created() {
    this.getHomeInfo();
  }
};
</script>
<style lang='scss' scoped>
#home {
  font-size: 16px;
  height: 100vh;
}
.my-swipe {
  width: 100%;
  height: 30vh;
}
.box {
  height: 50px;
  background-color: red;
}
.searchbtn {
  color: #fff;
}
</style>
